iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
1
Modern Web

Node JS-Back end見聞錄系列 第 13

Node.js-Backend見聞錄(12):實作-會員系統(一)-會員註冊(一)

  • 分享至 

  • xImage
  •  

Node.js-Backend見聞錄(12):實作-會員系統(一)-會員註冊(一)

前言

終於進入了實作階段,從這篇章節開始筆者會先敘述要實作的功能及需求,並會依照功能而去貼出相對應的程式碼。

關於會員系統

會員系統我們會分三部分來進行實作:

  1. 會員註冊
  2. 會員登入
  3. 修改會員資料

會員註冊需求

  • 不允許相同帳號(email)重複註冊
  • email 格式要檢查是否為 email 格式
  • 密碼要加密再存,不可逆。

套件

在此次的功能中,我們需要使用到些套件。套件的安裝方式則是開啟terminal並移動到專案資料夾底下,並輸入下列指令即可:

  • mysql:跟MySQL資料庫做聯動。
$ npm install mysql
  • dotenv:可用來隱藏些敏感性資料。
$ npm install dotenv

開發環境生成

先藉由Express提供的應用程式產生器來生成,若還沒安裝該產生器的讀者們可參考以下指令:

$ npm install express-generator -g

待安裝完成後,輸入下列指令來生成開發環境:

$ express --view=ejs member

待環境生成後,記得先輸入npm install指令來讓應用程式產生器所提供的些套件都有安裝進去:

$ npm install

測試工具

測試工具的部分我們會使用Postman來進行,透過它能讓我們測試所開發的API其運行是否正常。

資料結構

.
├── app.js
├── bin
│   └── www
├── config
│   └── development_config.js
├── controllers
│   └── modify_controller.js
├── models
│   ├── connection_db.js
│   └── register_model.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── member.js
│   └── users.js
├── sevice
│   └── member_check.js
├── views
    ├── error.ejs
    └── index.ejs
├── .env
└── .gitignore

開始開發

從開發的需求中發現,我們的API會是使用POST method的API,也就是說該API會夾帶從client端的使用者所輸入的資料。這時,我們先嘗試寫個API來接收使用者資料看看。

請將routes資料夾中member.js的程式碼改成:

var express = require('express');
var router = express.Router();

router.post('/', function(req, res, next) {
  console.log(req.body.test)
    
});

module.exports = router;

並在app.js中,添加兩行程式碼,分別是:

  • 添加一
var member = require('./routes/member');

添加在下述程式碼的前面。

var users = require('./routes/users');
  • 添加二
app.use('/', member);

添加在下述程式碼的前面。

app.use('/users', users);

輸入完成後,使用指令npm start開啟專案:

$ npm start

之後,開啟Postman並將參數設置成:

  • HTTP method: POST
  • HTTP url : localhost:3000/
  • Body中選擇x-www-form-urlencoded
    • Key: test
    • Value: 1

按出Send之後,應該會看到console.log出來的結果是1。確定能夠接收到來自client端的資料庫後,我們就來準備接收會從client端那邊接過來的參數:

const memberData = {
	name: req.body.name,
	email: req.body.email,
	password: req.body.password,
	create_date: onTime()
}

當初我們在資料庫有設定create_date,其用意在於為了取得建立資料的時間。所以,我們額外寫個function來產生它:

//取得現在時間,並將格式轉成YYYY-MM-DD HH:MM:SS
const onTime = () => {
    const date = new Date();
    const mm = date.getMonth() + 1;
    const dd = date.getDate();
    const hh = date.getHours();
    const mi = date.getMinutes();
    const ss = date.getSeconds();

    return [date.getFullYear(), "-" +
        (mm > 9 ? '' : '0') + mm, "-" +
        (dd > 9 ? '' : '0') + dd, " " +
        (hh > 9 ? '' : '0') + hh, ":" +
        (mi > 9 ? '' : '0') + mi, ":" +
        (ss > 9 ? '' : '0') + ss
    ].join('');
}

連接資料庫

這時我們就可以開始連接到我們的資料庫了。首先,我們在.env的檔案中,先將我們昨天的給予member資料庫的權限的帳號、密碼進去。

HOST = 'localhost'
DATABASE_USER = 'test'
DATABASE_PASSWORD = '1234'
DATABASE = 'member'

註記:這部分請將自行設定的帳號密碼輸入。

完成後,我們在另外到config資料夾中的development_config.js中做一個聯動的設定。而這邊我們會使用到其中一個套件dotenv,它的好處在於我們可以額外搭配.gitignore來做使用。

試想著,假設今天如果要跟將自己的專案上傳到github上,而我們沒將自己的敏感性資料進行處理就直接上傳,這等同於赤裸裸的告訴別人自己的帳號密碼。

require('dotenv').config()

module.exports = {
    mysql: {
      host: process.env.HOST,
      user: process.env.DATABASE_USER,
      password: process.env.DATABASE_PASSWORD,
      database: process.env.DATABASE
    }
}

接著在.gitignore檔案中加入:

# dotenv environment variables file
.env

來讓.env檔案不會被git給追蹤。等同於不會跟著被push到remote repository。最後,我們在models資料夾中的connection_db.js來設定連接資料庫:

// DataBase
const config = require('../config/development_config');
const mysqlt = require("mysql");

const connection = mysqlt.createConnection({
  host: config.mysql.host,
  user: config.mysql.user,
  password: config.mysql.password,
  database: config.mysql.database
});

connection.connect(err => {
  if (err) {
    console.log('connecting error');
  } else {
    console.log('connecting success');
  }
});

module.exports = connection;

小結

設定到這階段後,我們就算是成功將專案跟資料庫做聯動了。而下個章節將進入到把資料寫入資料庫的部分。


上一篇
Node.js-Backend見聞錄(11):關於後端觀念(七)-如何設定資料庫
下一篇
Node.js-Backend見聞錄(13):實作-會員系統(二)-會員註冊(二)
系列文
Node JS-Back end見聞錄31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
CoderMonkey
iT邦新手 5 級 ‧ 2018-10-10 16:17:25

DATABASE_PASSWORD = '1234'

之前的資料庫密碼用的123
這裡不一致了.


DATABASE_USER = 'test'

補充:還有username之前為testing

一連實作下來會連結不上資料庫,所以不注意的話..

感謝 @monkieny的提醒。

在寫這個專案時,那時的情境其實是設立另外組自訂的「DATABASE_USER」及「DATABASE_PASSWORD」,與文章上的所列舉的值不同。造成上下文資料不對稱的問題真的很抱歉 Orz

@ penguinrun
瞭解。有些天沒有來學習了~~
感謝你的文章呢。

0
CoderMonkey
iT邦新手 5 級 ‧ 2018-10-10 16:18:41

router.get('/', function(req, res, next) {
console.log(req.body.test)
});

這裡寫的get,
在postman裡post,是看不到這個console.log消息的.

已經修改內文了。

感謝提醒修正 Orz

/images/emoticon/emoticon34.gif

0

似乎Mysql版本和node有什麼奇妙的驗證問題

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server

Mysql學習之路總是會遇到一些小插曲/images/emoticon/emoticon02.gif

0
taowu74
iT邦新手 5 級 ‧ 2020-06-27 16:33:09

請問在安裝完npm 後routes內是index.js, 我按造文章寫的自己產生了一個member.js, 結果在postman 上是執行結果是not found error, 我看在app.js上還是讀取index.js,是否要怎麼修改, 使他載入member.js?
我的postman的畫面如附圖![]https://www.dropbox.com/s/r3g5yfjvwub8zzi/screen.JPG?dl=0
是該修改那裡呢?

Hi, taowu74

感謝你的提問,關於這部分筆者沒有把這部分的程式碼標示上去。

app.js 的部分可以參考:https://github.com/PenguinRun/member_system/blob/master/app.js

只要添加第 8 行及第 25 行就可以了。

Sorry, 這麼慢才回覆,若有任何問題歡迎繼續詢問喔!

我要留言

立即登入留言